const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//将打包后的js文件动态添加到HTML中
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//配置清除dist目录
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: 'development', //开发环境
    entry: './src/index.js',  //指定打包的入口文件
    output: {
        path:  path.join(__dirname,'dist'), // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'bundle.js',  //输出文件
    },
    devServer:{ //配置开发服务器，代码变化，自动刷新
        port:3001, //服务端口
        static: {
            directory: path.join(__dirname, '/'),//启动成功 之后要去那个路径下找index.html 文件
        },
        compress: true, //配置是否启用 gzip 压缩。boolean 为类型，默认为 false。
        open: true,// 是否自动打开浏览器
    },
    module: {
        rules: [
            {
                test: /\.less$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱,这个要注意，加载顺序很重要，是反着来的。先加载less-loader，css-loader，再加载style-loader。
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // {
            //     test: /\.css$/,
            //     use: [
            //         'style-loader',
            //         'css-loader'
            //     ]
            // },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    esModule: false,//一定要false，不然html引入圖片路徑回报错
                    limit: 1 * 1024,
                    outputPath:'images',
                    name: '[name].[hash:7].[ext]' //加上img的话，还可以自动生成文件夹
                }
            },
            {
                test: /\.(htm|html)$/,
                // 处理html文件的img图片 负责引入img,从而能被url-loader进行处理
                loader: 'html-withimg-loader',
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({ //最后打包的时候自动插入编译好的js脚本
            template: path.join(__dirname, 'src/index.html') // 我们原来的index.html，作为模板
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
    ]
}